import React from 'react';
class App extends React.Component {
  render() {
    let { data, onRemove, children, myrender } = this.props;
    // this.props.data = []
    // children： 数组 对象 字符串 undefined
    console.log(children)
    let header = children.filter(item => item.props.qqq == 'header')
    let footer = children.filter(item => item.props.qqq == 'footer')
    return <>
      {header}
      <ul className=''>
        {
          data.map(item => <li key={item.name}>
            {item.name}
            <button onClick={() => { onRemove(item) }}>
              X
          </button>
            {myrender(item)}
          </li>)
        }
      </ul>
      {footer}
    </>;
  }
}
function App2(props) {
  let { data, onRemove, children, myrender } = props;
  // children： 数组 对象 字符串 undefined
  console.log(children)
  let header = children.filter(item => item.props.qqq == 'header')
  let footer = children.filter(item => item.props.qqq == 'footer')
  return <>
    {header}
    <ul className=''>
      {
        data.map(item => <li key={item.name}>
          {item.name}
          <button onClick={() => { onRemove(item) }}>
            X
        </button>
          {myrender(item)}
        </li>)
      }
    </ul>
    {footer}
  </>;
}
export default App2